<template>
  <div class="cardLast">
    <header>
      <span @click="handleCk()"><svg-icon iconClass="back"/></span>
      <span >验证码</span>
      <span>...</span>
    </header>
    <div class="phone">
      您的预留手机号
      <b :value="value">15562228889</b>
    </div>
    <div class="info">
      <van-field
        class="input"
        readonly
        clickable
        :value="value"
        @click="handleClick()"
        @touchstart.native.stop="show = true"
        placeholder="获取验证码"
      />
      <strong @click="newClick()">重新发送</strong>
      <van-number-keyboard v-model="value" :show="show" :maxlength="6" @blur="show = false" />
    </div>
    <p>验证码有效期30分钟</p>
    <van-button type="primary" block class="btn" @click="Goon()">下一步</van-button>
  </div>
</template>

<script>
import { Dialog } from 'vant';
export default {
  data() {
    return {
      show: false,
      value: "",
      count:"123456"
    };
  },
  methods:{
    handleClick(){
      Dialog({ message: this.count });
      /* alert(this.count) */
    },
    handleCk(){
      this.$router.go(-1)
    },
    Goon() {
      if (this.value.length === 6 && this.value === this.count) {
        /* alert("绑定成功") */
        Dialog({ message: "绑定成功" });
        this.$router.push("./cardlist")
      } else {
        Dialog({ message: "验证码错误" });
        /* alert("验证码错误 ") */
      }
    },
    newClick(){
      Dialog({ message:this.count });
      /* alert(this.count) */
    }
  },
  }
</script>

<style lang="scss" scoped>
@import "@css/style.scss";
.input {
  height: px2rem(50);
  // background: #f5f5f5;
  line-height: px2rem(50);
  padding: 0 px2rem(10);
  font-weight: bold;
}
.cardLast {
  width: 100%;
  height: 100%;
  font-size: px2rem(18);
  display: flex;
  flex-direction: column;

  padding: 0 px2rem(10);
  header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: px2rem(50);
    font-weight: 550;
    border-bottom: 1px solid;
    padding: 0 px2rem(10);
  }
}
.phone {
  padding: px2rem(15);
  background: #eee;
  font-size: px2rem(15);
  font-weight: bold;
  margin: px2rem(5) 0;
}
.info {
  display: flex;
  justify-content: space-between;
  // padding: 0 px2rem(8);
  align-items: center;
  background: #fff;
  height: px2rem(60);
  strong {
    font-size: px2rem(15);
    font-weight: bold;
    color: blue;
    flex-shrink: 0;
  }
}
p {
  margin: px2rem(8) 0;
  font-size: px2rem(15);
  font-weight: bold;
  color: #666;
  padding: 0 px2rem(10);
}
.btn {
  padding: px2rem(20);
  margin: px2rem(30) 0;
  background: skyblue;
  border: 0;
  border-radius: px2rem(6);
}
</style>